.bar {
    display: inline-block;
    font-weight: 700;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 3rem;
    line-height: 2;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.createRoom {
    float: right;
    border-radius: 8px !important;
    margin-top: 36px !important;
    margin-right: 25px !important;
}

.avatar-name {
    float: right;
    margin-right: 36px;
    margin-top: 20px;
}

.avatar {
    border-radius: 8px !important;
    height: 64px;
    width: 64px;
}

.name {
    margin-top: 8px;
    text-align: center;
    font-size: medium;
}

/*.card {*/
/*    margin: 40px 40px 40px 40px;*/
/*    position: relative;*/
/*    display: -ms-flexbox;*/
/*    display: flex;*/
/*    -ms-flex-direction: column;*/
/*    flex-direction: column;*/
/*    min-width: 0;*/
/*    word-wrap: break-word;*/
/*    background-color: #fff;*/
/*    background-clip: border-box;*/
/*    border: 1px solid rgba(0, 0, 0, .125);*/
/*    border-radius: .25rem*/
/*}*/

.prompt {
    width: 60%;
    height: 500px;
    margin: 60px 20% 0 20%;
}

.confirm-btn {
    float: right;
}
.card h3{
    color: #070707;
}
.card h5{
    color: #ffffff;
}
.roomcard{
    border-radius: 10% !important;
    transition: all 0.3s;/* 上浮这个过程需要的时间 */!important;
    background-image: url("../img/homepage/light.jpeg");!important;
}
.roomcard:hover{
    background-color: #7e8086 !important;
    box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 1);/* 鼠标悬浮时盒子出现的阴影 */!important;
    transform: translate(0, -15px);/* 鼠标悬浮时盒子上移10px */!important;
}
